<!--
 * @Author: zhangyongbing
 * @Date: 2022-05-07 16:01:16
 * @LastEditors: zhangyongbing
 * @LastEditTime: 2022-05-07 18:23:41
 * @Description: 绑定明细 新增 编辑
 * @FilePath: /psys-ppm-web/src/pages/SystemPage/exThirdAuth/subpage/bindingDetailsInfo.vue
-->

<template>
	<div class="addOrEdit">
		<div class="manage">
			<el-form
				label-position="right"
				class="elFormWeb"
				:model="manageData"
				:rules="manageDataRule"
				ref="manageData"
				label-width="120px"
			>
				<el-form-item label="第三方系统全称">
					<el-input disabled class="others" size="mini" v-model="detailRow.fullName" placeholder="第三方系统全称"></el-input>
				</el-form-item>
				<el-form-item label="云平台账号" prop="psysAccNo">
					<el-select
						style="width: 100%"
						class="others"
						size="mini"
						v-model="manageData.psysAccNo"
						clearable
						filterable
						remote
						:remote-method="userNameRemote"
					>
						<el-option
							v-for="(item, index) in userSelectData"
							:key="index"
							:label="item.userName"
							:value="item.accNo"
						></el-option>
					</el-select>
					<!-- <el-input class="others" size="mini" v-model="manageData.psysAccNo" placeholder="云平台账号" clearable></el-input> -->
				</el-form-item>
				<el-form-item label="第三方账号" prop="thirdAccNo">
					<el-input class="others" size="mini" v-model="manageData.thirdAccNo" placeholder="第三方账号" clearable></el-input>
				</el-form-item>
				<el-form-item label="第三方密码" prop="thirdPassword">
					<!-- <el-input
						class="others"
						size="mini"
						v-model="manageData.thirdPassword"
						placeholder="第三方密码"
						show-password
						clearable
						autocomplete="off"
						style="display: none"
					></el-input> -->
					<el-input
						show-password
						class="others"
						size="mini"
						v-model="manageData.thirdPassword"
						placeholder="第三方密码"
						clearable
						autocomplete="new-password"
					></el-input>
				</el-form-item>
				<el-form-item label="状态" v-if="type == 'edit'">
					<el-switch
						v-model="manageData.status"
						active-value="0"
						inactive-value="1"
						active-text="启用"
						inactive-text="停用"
					></el-switch>
				</el-form-item>
			</el-form>
			<div class="userBtn">
				<el-button size="small" type="primary" @click="saveAdd" :disabled="loading">保 存</el-button>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	components: {},
	props: {
		//选中项id
		rowId: {
			type: String | Number,
		},
		//第三方授权ID
		parentId: {
			type: String | Number,
		},
		//状态
		type: {
			type: String,
			default: "add",
		},
		// 关闭页面
		close: {
			type: Function,
		},
		detailRow: {
			type: Object,
		},
	},
	data() {
		return {
			loading: false, //编辑时防止快速点击
			manageData: {
				psysAccNo: "",
				thirdAccNo: "",
				thirdPassword: "",
			},
			//校验规则
			manageDataRule: {
				psysAccNo: [{ required: true, message: "云平台账号不能为空", trigger: "blur" }],
				thirdAccNo: [{ required: true, message: "第三方账号不能为空", trigger: "blur" }],
				thirdPassword: [
					{ required: true, message: "第三方密码不能为空", trigger: "blur" },
					// {
					// 	min: 6,
					// 	max: 15,
					// 	message: "长度在 6 到 15 个字符",
					// 	trigger: "blur",
					// },
				],
			},
			userSelectData: [],
		}
	},
	async created() {
		if (this.type !== "add") {
			let params = {},
				data = {}
			const res = await this.$http.get(
				`/${this.$ServiceName}/api/external/dd_third_psys/${this.$version}/get_dd_third_psys_by_id?id=${this.rowId}`
			)
			console.log(res)
			if (res.data.success) {
				data = res.data.data
				if (data.id) {
					params = {
						psysAccNo: data.psysAccNo,
						thirdAccNo: data.thirdAccNo,
						thirdPassword: data.thirdPassword,
						status: data.status ? data.status : "1",
					}
				}
			}
			this.getUserSelectData("", data.psysAccNo)

			this.manageData = params
		} else {
			this.getUserSelectData("", "")
		}

		console.log(this.manageData)
	},
	mounted() {},
	methods: {
		//用户下拉框远程搜索
		userNameRemote(query) {
			this.getUserSelectData(query, "")
		},
		//获取用户下拉选中框
		getUserSelectData(keyword = "", accNo = "") {
			//初始化下拉表数组
			this.userSelectData = []
			this.$http
				.get(`/${this.$ServiceName}/api/external/public/listuser`, {
					params: {
						keyword: keyword,
						accno: accNo,
					},
				})
				.then(res => {
					if (res.data.success) {
						this.userSelectData = res.data.data
						// accNo ? (this.userForm.accNo = accNo) : "" //accNo存在就是编辑模式开始时的初始化赋值
					}
				})
		},
		//子列表的编辑
		/**
		 * @description: 保存新增
		 * @param {*}
		 * @return {*}
		 * @author: zhangzhanhua
		 */
		saveAdd() {
			this.$refs.manageData.validate(async valid => {
				if (valid) {
					let params = {
							psysAccNo: this.manageData.psysAccNo,
							thirdAccNo: this.manageData.thirdAccNo,
							thirdPassword: this.$md5(this.manageData.thirdPassword),
						},
						url = `/${this.$ServiceName}/api/external/dd_third_psys/${this.$version}/insert`,
						type = "post"
					if (this.type == "edit") {
						url = `/${this.$ServiceName}/api/external/dd_third_psys/${this.$version}/update_by_id`
						type = "put"
						params.id = this.rowId
						params.status = this.manageData.status
					} else {
						params.thirdSystemId = this.parentId
					}

					const res = await this.$http[type](url, params)
					if (res.data.success) {
						this.$message.success(res.data.msg)
						this.close()
					} else {
						this.$message.error(res.data.msg)
					}
				}
			})
		},
	},
}
</script>

<style lang="less" scoped>
.addOrEdit {
	.userBtn {
		z-index: 100;
		text-align: right;
		padding-right: 20px;
		border-top: 1px solid #c8cfde;
		background-color: #f5f7fa;
		position: absolute;
		bottom: 0px;
		left: 0;
		right: 0;
		height: 50px;
		line-height: 50px;
	}
}
.manage {
	/deep/ .drawer .el-input__inner {
		width: 100% !important;
	}
	.elFormWeb {
		// height: 654px;
		padding: 10px 30px 50px 10px;
		overflow: auto;
		.authorityName {
			border: 1px solid #dcdfe6;
			border-radius: 4px;
			padding: 5px 10px;
			min-height: 25px;
			.nameList {
				height: 25px;
				line-height: 25px;
				color: rgba(0, 0, 0, 0.8);
				// font-size: 12px;
			}
		}
	}
}
</style>
